<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bankBg {
  background: #39ccac;
}
.bankBg2 {
  background: #ff3a5b;
}
.bankBg3 {
  background: #4989ff;
}
</style>
<template>
  <div class="h100 b4">
    <div class="w100 h100 f a-c j-c" v-if="show.loading">
      <van-loading type="spinner"/>
    </div>
    <div class="p20">
      <div
        class="bg-white round p20 mt15 bankBg cfff"
        @click="$link('./bankcardview')"
        v-if="datas"
      >
        <h2 class="f18">{{datas.bankName}}</h2>
        <p class="mt10">{{datas.cardNo}}</p>
      </div>
      <div v-else class="bg-white round p20 center" @click="addCard">
        <van-icon name="add-o" size="1rem"/>
        <p>添加银行卡</p>
      </div>
    </div>
    <pwd
      v-if="show.verification"
      :type="0"
      @validationPwd="validationPwd"
      @validationClose="show.verification=false"
    ></pwd>
  </div>
</template>

<script>
import pwd from "../components/password";
import { bankcardList, isSetPayPwd } from "@/http/api";
export default {
  data() {
    return {
      loading: true,
      datas: null,
      show: {
        verification: false,
        loading: true
      }
    };
  },
  components: {
    pwd
  },
  created() {
    bankcardList().then(res => {
      if (res.code === 200) {
        this.show.loading = false;
        this.datas = res.result;
      }
    });
  },
  methods: {
    addCard() {
      isSetPayPwd().then(res => {
        if (res.code === 200) {
          this.$link("./addbankcard");
        } else {
          this.show.verification = true;
        }
      });
    },
    validationPwd(val) {
      this.show.verification = false;
      this.Toast.success({
        iconUrl: "../../../static/img/logo.png",
        position: "topCenter",
        message: "密码设置成功，请妥善保管"
      });
    }
  }
};
</script>